iT邦幫忙

2024 iThome 鐵人賽

DAY 28
0
自我挑戰組

初階網頁學習與製作系列 第 28

Day-28 A-Frame (6) 天使光環+旋轉 👼

  • 分享至 

  • xImage
  •  

今天,我加了一個圓環進入我的程式碼裡面,讓整個畫面變得更豐富一點。
為了讓整體畫面更鮮明,我選用橘色來當我的光環顏色。

首先,使用 <a-entity> 標籤來定義一個圓環(Torus),並指定它的幾何形狀與材質。透過geometry屬性,我們設置了圓環的半徑為1.5,內管半徑為0.1,從而創造出一個厚實的環狀結構。
https://ithelp.ithome.com.tw/upload/images/20241012/20169460nicpEUBiSm.png
(光環程式碼)

最重要的部分是旋轉動畫效果。我使用了animation屬性讓圓環繞著Y軸持續旋轉。透過設置 property: rotation 來指定旋轉的屬性,並將 to: 0 360 0 設為目標值,讓圓環每4秒( dur: 4000 )完成一次完整的360度旋轉。此外, loop: true 使得旋轉動畫無限循環,從而讓圓環、方塊都會不斷地轉動,增強了視覺效果的動態性。
https://ithelp.ithome.com.tw/upload/images/20241012/20169460FyGIeUAFd5.png
(方塊旋轉程式碼)

執行結果:
https://ithelp.ithome.com.tw/upload/images/20241012/201694606sPtjr8ccz.png
https://ithelp.ithome.com.tw/upload/images/20241012/20169460qw99HJgCcd.png
(光源在左邊,所以左邊會是亮面)

今天的程式碼:
https://github.com/HUIYUK/iron-race/blob/main/day%2028_Aframe.html

參考資料:
https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#conclusion


上一篇
Day-27 A-Frame (5) 增加光源 💡
下一篇
Day-29 A-Frame (7) 光環的材質 💍
系列文
初階網頁學習與製作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言